<template>
	<view class="content">
		<view class="top">
			<view class="info">
				<view class="space-between">
					<text class="status">{{data.applyStatus | formatStatus}}</text>
					<view class="resume">
						<text class="yzb yzb-tixing"></text>
						<text @click="toResumeDetail">在线简历</text>
					</view>
				</view>
				<text class="time">{{data.createTime}}</text>
			</view>
			<view class="position">
				<view class="logo">
					<image :src="data.companyLogo"></image>
				</view>
				<view class="job">
					<view class="title">
						<view class="left">
							<text class="title-parttime" v-if="data.ifParttime==1">兼职</text>
							<text class="title-parttime2" v-if="data.ifParttime==2">实习</text>
							<text class="title-parttime3" v-if="data.ifParttime==3">临工</text>
							<text class="title-name">{{data.postName}}</text>
						</view>
					</view>
					<view class="company">
						{{data.companyName}}
						<view class="height-line"></view>
						{{data.staffSize}}
						<view class="height-line"></view>
						{{data.companyNature}}
					</view>
					<view class="desc space-between">
						<text>{{data.salary}}<text v-if="data.unit != '元/月'">{{ data.unit }}</text></text>
					</view>
				</view>
			</view>
			<view class="chat" @click="toChat">
				<text class="chat-icon yzb yzb-goutong1"></text>
				<text class="chat-title">沟通职位</text>
			</view>
		</view>
		<view class="times">
			<yzb-time :dataArray="logList"></yzb-time>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logList:[],
				id:'',
				data:{},
			}
		},
		
		filters:{
			//求职状态:1-已投递，2-被查看，3-初筛，4-笔试，5-面试，6-录用，9-不合适
			formatStatus(val) {
				if (val == 1) {
					return '已投递';
				} else if (val == 2) {
					return '被查看';
				} else if (val == 3) {
					return '通过初筛';
				}else if (val == 4) {
					return '通知笔试';
				}else if (val == 5) {
					return '通知面试';
				}else if (val == 6) {
					return '已录用';
				}else if (val == 9) {
					return '不合适';
				}
			}
		},
		
		onLoad(options) {
			this.id=options.id;
			this.getApplyResponseList();
			this.getApplyLogList();
		},
		
		methods: {
			
			
			getApplyResponseList() {
				this.$apis.getApplyResponseList({id:this.id}).then(res => {
					console.log('getApplyResponseList', res);
					if (res.records.length==1) {
						this.data=res.records[0]
					}
				});
			},

			async getApplyLogList(){
				this.$apis.getApplyLogList({applyId:this.id}).then(res => {
					console.log('getApplyLogList', res);
					this.logList=res;
					if(this.logList.length>0){
						this.logList[0].active=true;
					}
				});
			},
			
			toResumeDetail(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.resumePreview,
					query: {
						id: this.data.resumeId
					}
				});
			},
			
			toChat(){
				this.$mRouter.push({
					route: this.$mRoutesConfig.privateChat,
					query: {
						id: this.data.comMemberId,
						avatar: this.data.comUserAvatar,
						name: this.data.comUsername,
						companyId: this.data.companyId,
						positionId: this.data.positionId
					}
				});
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	.content{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	
	.top{
		width: 100%;
		background-color: $main-color;
		
		.info{
			padding: 20upx;
			color: #fff;
			.status{
				font-size: 40rpx;
			}
			.resume{
				border: 2upx solid #fff;
				height: 50upx;
				padding: 0 20upx;
				border-radius: 25upx;
			}
			.time{
				
			}
		}
		
		.position {
			margin: 0 20rpx;
			background-color: $bgcolor_white;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			border-radius: 10upx;
			padding: 15upx;
		
			.logo {
				margin-right: 20upx;
				border: #eee solid 2upx;
				border-radius: 10upx;
		
				image {
					width: 120upx;
					height: 120upx;
				}
			}
		
			.job {
				flex: 1;
		
				.title {
					.left {
						font-weight: bold;
						font-size: $uni-font-size-lg;
					}
					.title-parttime{
						color: $main-color;
						border: 1upx solid $main-color;
						font-size: $uni-font-size-sm;
						margin-right: 15upx;
						padding: 5upx 10upx;
						border-radius: 6upx;
					}
					.title-parttime2{
						color: green;
						border: 1upx solid green;
						font-size: $uni-font-size-sm;
						margin-right: 15upx;
						padding: 5upx 10upx;
						border-radius: 6upx;
					}
					.title-parttime3{
						color: $uni-color-primary;
						border: 1upx solid $uni-color-primary;
						font-size: $uni-font-size-sm;
						margin-right: 15upx;
						padding: 5upx 10upx;
						border-radius: 6upx;
					}
					
					.title-name {
						font-weight: bold;
						font-size: $uni-font-size-lg;
					}
		
					.title-share {
						color: $main-color;
						border: 1upx solid $main-color;
						border-radius: 20upx 0upx;
						font-size: $uni-font-size-sm;
						margin-left: 20upx;
						padding: 0upx 10upx;
					}
		
					.right {
						color: #666;
					}
				}
		
				.company {
					color: $font-color-666;
					margin-top: 5upx;
					font-size: $uni-font-size-base;
					display: flex;
					flex-direction: row;
					align-items: center;
		
					.height-line {
						height: 20upx;
						width: 4upx;
						background-color: $font-color-ccc;
						margin: 0 15upx;
					}
				}
		
				.desc {
					text {
						color: $main-color;
					}
				}
			}
		}
		
		.chat{
			background-color: #fff;
			margin: 0 20upx;
			margin-bottom: 20upx;
			border-radius: 10upx;
			padding: 10upx ;
			text-align: center;
			
			.chat-icon{
				color: #666;
			}
			.chat-title{
				margin-left: 8upx;
				color: #666;
			}
		}
	}
	
	.times{
		width: 100%;
		margin-top: 50rpx;
	}

	.space-between {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
	}
</style>